<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<link rel="stylesheet" href="../css/21DOM03.css" />
	</head>
	
	<body>
		<div id="box" class="aa bb">
			测试div
		</div>
	</body>
	
	<script>
		window.onload = function(){
			var box = document.getElementById('box');
			//box.id = 'pox';//交换id修改样式
		    //box 和pox都可以用了，会引发各种怪异的现象，不建议。
		    
		    //class 调用时可以叠加的，如果样式相同后面的覆盖前面的，如果相同进行叠加。
		 
		   box.className = 'aa bb cc dd';//冗余
		   //要添加和删除那个要带之前的，叠加
		   
		   alert(hasClass(box,'aa'))
		     box.className="bb"; //删除之前的修改为bb样式
		     addClass(box,'cc');
		}
		
		//判断是否存在特定的class ,有返回true,没有返回false
		function hasClass(element,cName){
			                                        //使用完全全匹配    避免  a ==aa
			return !!element.className.match(new RegExp('(\\s|^)'+cName+'(\\s|$)'));
		
			//!! 装换false 和true
			
		}
		//添加一个class，如果不存在的话
		function addClass(element,cName){
			if(!hasClass(element,cName)){
			 element.className += ''+cName;
		
			}
		}
		//移除一个class如果存在的话
		function removeClass(element,cName){
			if(hasClass(element,cName)){
				element.className = element.className.replace(
					new RegExp('(\\s|^)'+cName+'(\\s|$)'),'');
			}
		}
		
	</script>
</html>
